import React, { useEffect, useState } from 'react';
import {Button,Table,Switch,notification} from 'antd'
import type { ColumnsType } from 'antd/es/table';
import service from '../../../api'
import "./SecKill.scss"
import _ from 'lodash'

interface Props {}

function SecKill(props:Props) {
    
    var [prolist , setProlist] = useState([])
    var [pagination , setPagination] = useState({current:0,pageSize:0})
    var [loading , setLoading] = useState(false)

    //请求产品列表
    var request_pro_list = async ()=>{
        setLoading(true);
        var res = await service.pro.pro_list();
        setLoading(false);
        console.log(res.data.data);
        setProlist(res.data.data)
    }
    useEffect(()=>{
        request_pro_list()
    },[])

    interface DataType {
        key: string;
        proid: string;
        img1: string;
        issale: number;
        isseckill: number;
        isrecommend: number;
    }

    //表格列的配置项
    const columns: ColumnsType<DataType> = [
        {
          title: '序号',
          key: 'name',
          render: (_,record,index) => <div>{ (pagination.current-1) * pagination.pageSize + index+1}</div>,
        },
        {
          title: '图片',
          key: 'adminname',
          width: 120,
          render: (_,record,index) => <img src={record.img1}/>,
        },
        {
          title: '名称',
          key: 'name',
          width: 200,
          dataIndex:'proname'
        },
        {
          title: '品牌',
          key: 'name',
          dataIndex:'brand'
        },
        {
          title: '分类',
          key: 'name',
          dataIndex:'category'
        },
        {
          title: '原价',
          key: 'name',
          dataIndex:'originprice'
        },
        {
          title: '折扣',
          key: 'name',
          dataIndex:'discount'
        },
        {
          title: '销量',
          key: 'name',
          dataIndex:'sales'
        },
   
        {
          title: '是否秒杀',
          key: 'name',
          render: (_,record,index) => <Switch checked={record.isseckill==1} onChange={(checked)=>{ handleChange(checked,record.proid,'isseckill') }} />,
        },

        {
          title: '操作',
          key: 'name',
          render: (_,record,index) => <>
            <Button danger type="primary"> Delete </Button>
          </>,
        },
    ];

    //切换展示状态
    var handleChange = async (checked:any,proid:any,type:any)=>{
        var res = await service.pro.pro_updateFlag({ proid,flag:checked,type });
        if( res.data.code == 200 ){
            notification.success({message:'更新flag成功!'});
            //查找产品,更改产品的状态
            var item:any = prolist.find((item:any)=>item.proid==proid)
            if(item){
                item[type] = 1-item[type];
            }
            
            //让组件更新
            var newprolist = _.cloneDeep(prolist);
            setProlist( newprolist );
        }
    }

    //分页时执行
    var onPageChange = (pagination:any)=>{
        setPagination( pagination )
    }

    return (
        <div className='seckill'>
            <Table loading={loading} className='table' onChange={onPageChange} style={{marginTop:20}} columns={columns} dataSource={prolist} />
        </div>
    );
}

export default SecKill;